<template>
  <div class="view-fill">
    <div class="app-container-flex" v-if="!showModify.visible">
      <NewFullScreen
        v-model="showDialog"
        @returnBack="returnBack"
        :title="title"
        :btn-list="btnList"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList">
              <template v-slot:basic-licenseFilePath>
                <span v-if="infoList.data.licenseFilePath">
                  <eleGallery
                    :lazy="true"
                    :size="150"
                    :source="infoList.data.licenseFilePathList"
                    title="证照"
                  ></eleGallery>
                </span>
                <span v-else>-</span>
              </template>
            </basic-information>
          </div>
        </div>
        <div class="model-panel" v-if="infoList.data.licenseApplicationType == 1">
          <div class="model-panel-title">
            <p>关联产品信息</p>
          </div>
          <PageTable
                v-model:data="tableInfo.data"
                :pager="false"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                @handleEvent="handleEventTable"
              >
              <template #col-commonName="scope">
                <p>{{ scope.row.commonName || '-' }}</p>
                <p>{{ scope.row.productCode || '-' }}</p>
                <p>{{ scope.row.alias || '-' }}</p>
              </template>
              <template #col-standard="scope">
                <p>{{ scope.row.standard || '-' }}</p>
                <p>{{ scope.row.unitName || '-' }}</p>
              </template>
              <template #col-type="scope">
                <p>{{ scope.row.productTypeValue || '-' }}</p>
                <p>{{ scope.row.codeTypeValue || '-' }}</p>
                <p>{{ scope.row.productCategoryValue || '-' }}</p>
              </template>
              <template #col-supplierName="scope">
                <p>{{ scope.row.supplierName || '-' }}</p>
              </template>
              <template #col-licenseNumber="scope">
                <p>{{ scope.row.licenseNumber || '-' }}</p>
                <p>{{ scope.row.brandName || '-' }}</p>
              </template>
            </PageTable>
        </div>
      </NewFullScreen>
    </div>
    <modify
      v-if="showModify.visible"
      v-model:visible="showModify.visible"
      :title="showModify.title"
      :type="showModify.type"
      :id="id"
      @returnModify="modifyCallback"
    ></modify>
  </div>
</template>

<script setup name="licenseDetails">
import BasicInformation from '@/components/BasicInformation/index'
import { selectLicenseDetail, getProductPage } from '@/api/core'
import eleGallery from '@/components/UploadImg/eleGallery'
import modify from '@/views/product/license/modify'

const emit = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {},
})

const title = '证照详情'
const infoList = reactive({
  data: {},
  fieldList: [
    { label: '证号', value: 'licenseNumber' },
    { label: '证照类型', value: 'licenseTypeValue' },
    { label: '证照分类', value: 'licenseApplicationTypeValue' },
    { label: '管理类别', value: 'manageTypeValue' },
    { label: '产品名称', value: 'licenseName' },
    { label: '英文名称', value: 'enName' },
    { label: '生效日期', value: 'licenseBeginDate' },
    { label: '失效日期', value: 'licenseEndDate' },
    { label: '厂家', value: 'brandName' },
    { label: '包装规格', value: 'packedStandard' },
    { label: '有效期', value: 'validityValue' },
    { label: '生产地址', value: 'productionAddress' },
    { label: '预计用途', value: 'expectedUse' },
    { label: '存储条件', value: 'storageCondition' },
    { label: '状态', value: 'statusValue' },
    { label: '创建人', value: 'createUserName' },
    { label: '创建时间', value: 'createTime' },
    { label: '最近更新人', value: 'updateUserName' },
    { label: '最近更新时间', value: 'updateTime' },
    { label: '备注', value: 'remark', type: 'popover' },
    {
      label: '证照',
      value: 'licenseFilePath',
      type: 'slot',
      className: 'not-br',
    },
  ],
})
const showModify = reactive({
  title: '修改',
  type: 'update',
  visible: false,
})
const btnList = reactive([
  {
    label: '修改',
    event: update,
    show: proxy.$permission('license:update'),
  },
])
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

const tableInfo = ref({
  data: [],
  fieldList: [
      {
        label: '通用名称\n编码\n别名',
        value: 'commonName',
        minWidth: 220,
        type: 'slot',
      },
      { label: '规格\n计量单位', value: 'standard', type: 'slot' },
      {
        label: '产品类型\n条码类型\n产品分类',
        value: 'type',
        minWidth: 150,
        type: 'slot',
      },
      { label: '助记符', value: 'mnemonic', width: '100px' },
      {
        label: '证号\n生产厂家',
        value: 'licenseNumber',
        minWidth: 220,
        type: 'slot',
      },
    ],
})

onMounted(() => {
  init()
  getProduct()
})

function getProduct() {
  getProductPage({licenseId: props.id || null}).then((res) => {
    if (res && res.success) {
      let data = res.data
      tableInfo.value.data = data
    }
  })
}
function returnBack() {
  emit('returnBack', false)
}
function init() {
  selectLicenseDetail(props.id).then((res) => {
    if (res) {
      infoList.data = res.data
    }
  })
}
function update() {
  showModify.visible = true
}
function modifyCallback() {
  init()
  getProduct()
}
</script>

<style scoped></style>
